<template>
  <el-row class="rowNavStyle">
    <el-col :span="24" class="colNavStyle">
      <menuButton
        @addCorporationKey="addClick"
        @closeCorporationKey="batchCloseClick"
        @enableCorporationKey="batchEnableClick"
        helper-path="pages/aae246"
      ></menuButton>
    </el-col>
  </el-row>
  <el-table
    :data="tableData"
    stripe
    :border="true"
    row-key="roleId"
    @selection-change="SelectionChange"
    default-expand-all
    v-loading="loading"
  >
    <el-table-column type="selection" width="55" />
     <!-- 动态列 -->
    <el-table-column
      show-overflow-tooltip
      v-for="itme in columns"
      :key="itme.fieldEnName"
      :prop="itme.fieldEnName"
      :label="itme.fieldCnName"
      :min-width="itme.fieldWidth"
      :sortable="itme.fieldSortable"
      :align="itme.fieldAlign"
    >
      <template v-if="itme.fieldSlot === 'isOpen'" #default="isOpen">
        <el-switch
          :before-change="switchClick"
          v-model="isOpen.row.isOpen"
          class="ml-2"
          inline-prompt
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          active-text="开启中"
          inactive-text="关闭中"
        />
      </template>
    </el-table-column>
    
    <el-table-column label="操作" align="center" width="100">
      <template #default="scope">
        <dataRowButton
          :model="scope.row"
          @editCorporationKey="handleEdit(scope.row)"
        ></dataRowButton>
      </template>
    </el-table-column>
  </el-table>
  <addOrEdit
    :isVisibles="isVisibles"
    :modelData="ruleForm"
    :dialogTitle="dialogTitle"
    @closeBnt="colosClick"
  ></addOrEdit>
</template>
  <script lang="ts" setup>
import {
  SysCorporationOutPut,
  SysCorporation,
} from "@/model/corporation/corporation";
import { nextTick, onMounted, reactive, ref } from "vue";
import addOrEdit from "../corporation/addOrEdit.vue";
import { getAllCorporation, SetCorporationIsOpen } from "@/api/corporation";
import { ElMessage, ElMessageBox } from "element-plus";
import { UpdateIsOpenInPut } from "@/model/public/public";
import menuButton from "@/components/menuButton.vue";
import dataRowButton from "@/components/dataRowButton.vue";
import { GetMenuColsByMenuId } from "@/api/publicTool";
//初始加载dom
onMounted(() => {
  GetMenuColsByMenuIdMsg();
});

//加载状态
const loading = ref(true);
//定义列
const columns = ref();
//table数据
const tableData = ref<SysCorporationOutPut[]>([]);
//控制弹出层显隐
const isVisibles = ref<boolean>(false);
//弹出层标题
const dialogTitle = ref<string>();
//公司模型数据
const ruleForm = reactive<SysCorporation>({
  CorporationName: "",
  CorporationCode: "",
  IsOpen: true,
  Remark: "",
  CorporationKey: "",
});

//设置公司是否启用输入模型
const updateCorporationIsOpenInPut = reactive<UpdateIsOpenInPut>({
  Keys: [],
  IsOpen: false,
});

// 选中项
const selectedRows = ref<SysCorporationOutPut[]>([]);

//菜单列
const GetMenuColsByMenuIdMsg = async () => {
  columns.value = await GetMenuColsByMenuId();
  if (columns.value.length > 1) {
    getAllCorporationMsg();
  } else {
    columns.value = [];
  }
};

//获取table数据
const getAllCorporationMsg = () => {
  loading.value = true;
  getAllCorporation()
    .then(({ data, code }) => {
      if (code === 200) {
        tableData.value = data;
      }
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
};

//复选框事件
const SelectionChange = (val: SysCorporationOutPut[]) => {
  selectedRows.value = val;
};

//关闭弹出层
const colosClick = function () {
  getAllCorporationMsg();
  isVisibles.value = false;
};

//编辑
const editClick = function () {
  if (selectedRows.value.length == 0) {
    ElMessage({
      message: "请选择一条数据进行编辑",
      type: "warning",
    });
  } else if (selectedRows.value.length > 1) {
    ElMessage({
      message: "只能选择一条数据进行编辑",
      type: "warning",
    });
  } else {
    addOrEditMethod(selectedRows.value[0], false);
  }
};
//行内编辑事件
const handleEdit = function (model: SysCorporationOutPut) {
  addOrEditMethod(model, false);
};

//新增
const addClick = function (model: SysCorporationOutPut) {
  const entity = ref<SysCorporationOutPut[]>([]);
  if (model !== undefined) {
    addOrEditMethod(model, false);
  } else {
    addOrEditMethod(entity.value[0], true);
  }
};

//新增或编辑方法
const addOrEditMethod = function (model: SysCorporationOutPut, isAdd: boolean) {
  if (isAdd) {
    ruleForm.CorporationCode = "";
    ruleForm.CorporationKey = "";
    ruleForm.CorporationName = "";
    ruleForm.Remark = "";
    ruleForm.IsOpen = true;
  } else {
    ruleForm.CorporationCode = model.corporationCode;
    ruleForm.CorporationKey = model.corporationKey;
    ruleForm.CorporationName = model.corporationName;
    ruleForm.Remark = model.remark;
    ruleForm.IsOpen = model.isOpen;
  }
  dialogTitle.value = isAdd ? "新增公司" : "编辑公司";
  isVisibles.value = true;
};

//关闭
const closeClick = function (model: SysCorporationOutPut) {
  setIsOpen(false);
  updateCorporationIsOpenInPut.Keys = [];
  updateCorporationIsOpenInPut.Keys.push(model.corporationKey);
  updateCorporationIsOpenInPut.IsOpen = false;
};

//启用
const enableClick = function (model: SysCorporationOutPut) {
  setIsOpen(true);
  updateCorporationIsOpenInPut.Keys = [];
  updateCorporationIsOpenInPut.Keys.push(model.corporationKey);
  updateCorporationIsOpenInPut.IsOpen = true;
};

//批量关闭
const batchCloseClick = function () {
  if (selectedRows.value.length == 0) {
    ElMessage({
      message: "请选择一条数据进行操作",
      type: "warning",
    });
  } else {
    setIsOpen(false);
    updateCorporationIsOpenInPut.Keys = selectedRows.value.map(
      (f) => f.corporationKey
    );
    updateCorporationIsOpenInPut.IsOpen = false;
  }
};

//批量启用
const batchEnableClick = function () {
  if (selectedRows.value.length == 0) {
    ElMessage({
      message: "请选择一条数据进行操作",
      type: "warning",
    });
  } else {
    setIsOpen(true);
    updateCorporationIsOpenInPut.Keys = selectedRows.value.map(
      (f) => f.corporationKey
    );
    updateCorporationIsOpenInPut.IsOpen = true;
  }
};

//设置公司启用状态
const setIsOpen = function (isOpen: boolean) {
  var title = isOpen
    ? "你确认要开启选中公司，开启后公司的一切功能都将启用？"
    : "你确认要关闭选中公司，关闭后公司的一切功能都将停用！";
  ElMessageBox.confirm(title, "提示消息", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      SetCorporationIsOpen(updateCorporationIsOpenInPut).then(
        ({ data, code, msg }) => {
          if (code == 200) {
            getAllCorporationMsg();
            ElMessage({
              message: msg,
              type: "success",
            });
          }
        }
      );
    })
    .catch(() => {
      //取消
    });
};

//禁止点页面的滑块
const switchClick = function () {
  return new Promise((_, reject) => {
    return reject(new Error("Error"));
  });
};
</script>
  <style>
</style>